<template>
  <div class="app-container">
    <el-form :model="query" :inline="true" ref="searchForm">
      <el-form-item prop="username">
        <el-input v-model="query.username" :placeholder="$t('user.username')" clearable maxlength="30"></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="query.fullName" :placeholder="$t('user.fullName')" clearable maxlength="30"></el-input>
      </el-form-item>
      <el-form-item prop="sex">
        <el-select v-model="query.sex" clearable placeholder="请选择">
          <el-option :label="$t('user.enum.sex.M')" value="M"></el-option>
          <el-option :label="$t('user.enum.sex.F')" value="F"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="fullAddress">
        <el-input v-model="query.fullAddress" :placeholder="$t('user.fullAddress')" clearable maxlength="30"></el-input>
      </el-form-item>
      <el-form-item prop="enabled">
        <el-select v-model="query.enabled" clearable placeholder="请选择">
          <el-option :label="$t('user.enum.enabled.true')" :value="true"></el-option>
          <el-option :label="$t('user.enum.enabled.false')" :value="false"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row style="margin-bottom: 10px;">
      <el-button-group>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="toAdd">{{$t('table.add')}}</el-button>
        <el-button type="primary" size="small" icon="el-icon-edit" @click="toUpdate">{{$t('table.update')}}</el-button>
        <el-button type="primary" size="small" icon="el-icon-delete" @click="toDelete">{{$t('table.delete')}}</el-button>
        <el-button type="primary" size="small" icon="el-icon-document" @click="toDetail">{{$t('table.detail')}}</el-button>
        <el-button type="primary" size="small" icon="el-icon-refresh" @click="toResetPassword">{{$t('user.resetPassword')}}</el-button>
      </el-button-group>
      <el-button-group style="position: absolute; right: 0px;">
        <el-button type="primary" size="small" icon="el-icon-search" @click="reload">{{$t('table.search')}}</el-button>
        <el-button type="default" size="small" icon="el-icon-refresh" @click="resetForm">{{$t('table.reset')}}</el-button>
      </el-button-group>
    </el-row>
    <el-table ref="table" :data="tableData" border highlight-current-row @row-click="onRowSelected" style="width: 100%" @sort-change="sortChange">
      <el-table-column type="index" :label="$t('table.index')" :index="indexMethod" align="center" width="55"></el-table-column>
      <el-table-column prop="username" :label="$t('user.username')" width="120"></el-table-column>
      <el-table-column prop="enabled" :label="$t('user.enabled')"  :formatter="enabledFormatter" width="90"></el-table-column>
      <el-table-column prop="group" :label="$t('user.group')" :formatter="groupFormatter" width="110"></el-table-column>
      <el-table-column prop="fullName" :label="$t('user.fullName')" width="100"></el-table-column>
      <el-table-column prop="sex" :label="$t('user.sex')" :formatter="sexFormatter" width="80"></el-table-column>
      <el-table-column prop="birthday" :label="$t('user.birthday')" :formatter="birthdayFormatter" width="100"></el-table-column>
      <el-table-column prop="roles" :label="$t('user.roles')" :formatter="rolesFormatter"></el-table-column>
      <el-table-column prop="orgUsers" :label="$t('user.org')" :formatter="orgUsersFormatter"></el-table-column>
      <el-table-column prop="fullAddress" :label="$t('user.fullAddress')"></el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import { generateTitle } from '@/utils/i18n'
  import { tableOptions, tableMethods, loadTableData, reloadTableData, updateTableRow, deleteTableRow } from '@/utils/utils'
  export default {
    data() {
      return {
        ...tableOptions.apply(this),
        baseUrl: '/user',
        query: {
          sort: 'id',
          order: 'desc'
        }
      };
    },
    methods: {
      ...tableMethods.apply(this),
      enabledFormatter(row, column, cellValue, index){
        return this.$t('user.enum.enabled.'+cellValue);
      },
      groupFormatter(row, column, cellValue, index){
        if(cellValue)
          return cellValue.name;
        return '';
      },
      sexFormatter(row, column, cellValue, index){
        return this.$t('user.enum.sex.'+cellValue);
      },
      rolesFormatter(row, column, cellValue, index){
        if(cellValue && cellValue.length>0)
          return cellValue.map(item => {
              return item.name;
          }).join(' ');
        return '';
      },
      birthdayFormatter(row, column, cellValue, index){
        return new Date(cellValue).format('yyyy-MM-dd');
      },
      orgUsersFormatter(row, column, cellValue, index){
        if(cellValue && cellValue.length>0)
          return cellValue.map(item => {
            return item.orgName+'['+item.jobName+']';
          }).join(' ');
        return '';
      },
      toResetPassword(){
        if(this.selectedRow)
          this.$router.push({path: '/resetPassword'});
        else{
          this.$message({
            message: this.$t('notify.unselectedRow'),
            type: 'warning'
          });
        }
      }
    },
    mounted: function () {
      this.reload();
    },
    router: new VueRouter({
      mode: 'abstract',
      routes: [
        { path: '/add', component: () =>{ return import('./dialog/add')}},
        { path: '/update', component: () => { return import('./dialog/update')}},
        { path: '/detail', component: () => { return import('./dialog/detail')}},
        { path: '/resetPassword', component: () => { return import('./dialog/resetPassword')}}
      ]
    })
  }
</script>
